/**
 * Created with hong.rong
 * Description:*
 * Date:2020/06/25
 */

import React from 'react'
import { InfoCircleOutlined } from '@ant-design/icons'
import { Col, Row, Tooltip } from 'antd'
import numeral from 'numeral'
import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from './Charts'
import Trend from './Trend'
import Yuan from '../utils/Yuan'
import styles from '../style.less'

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
}

const IntroduceRow = ({ loading, visitData }) => (
  <Row gutter={24} type="flex">
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="总销售额"
        action={
          <Tooltip title="Introduce">
            <InfoCircleOutlined />
          </Tooltip>
        }
        loading={loading}
        total={() => <Yuan>126560</Yuan>}
        footer={
          <Field
            label="日均销售额"
            value={`￥${numeral(12423).format('0,0')}`}
          />
        }
        contentHeight={46}
      >
        <Trend flag="up" style={{ marginRight: 16 }}>
          <span>周同比</span>
          <span className={styles.trendText}>12%</span>
        </Trend>
        <Trend flag="down">
          <span>日环比</span>
          <span className={styles.trendText}>11%</span>
        </Trend>
      </ChartCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title="访问量"
        action={
          <Tooltip title="Introduce">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={numeral(8846).format('0,0')}
        footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
        contentHeight={46}
      >
        <MiniArea color="#975FE4" data={visitData} />
      </ChartCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title="支付笔数"
        action={
          <Tooltip title="Introduce">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={numeral(6560).format('0,0')}
        footer={<Field label="转化率" value="90%" />}
        contentHeight={46}
      >
        <MiniBar data={visitData} />
      </ChartCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        loading={loading}
        bordered={false}
        title="预定数量（万斤）"
        action={
          <Tooltip title="Introduce">
            <InfoCircleOutlined />
          </Tooltip>
        }
        total="12"
        footer={
          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
            <Trend flag="up" style={{ marginRight: 16 }}>
              <span>周同比</span>
              <span className={styles.trendText}>12%</span>
            </Trend>
            <Trend flag="down">
              <span>日环比</span>
              <span className={styles.trendText}>11%</span>
            </Trend>
          </div>
        }
        contentHeight={46}
      >
        <MiniProgress
          percent={78}
          strokeWidth={8}
          target={80}
          color="#13C2C2"
        />
      </ChartCard>
    </Col>
  </Row>
)

export default IntroduceRow
